<template>
  <div>
    <myPage></myPage>
    <div class="table_position">
      <el-table :data="recardData" height="560px">
        <el-table-column label="卡种" prop="race" :filters="raceFil" :filter-method="fliterRace"></el-table-column>
        <el-table-column label="卡类" prop="types" :filters="typeFil" :filter-method="fliterRace"></el-table-column>
        <el-table-column label="数量" prop="num" ></el-table-column>
        <el-table-column label="单张面值" prop="price"></el-table-column>
        <el-table-column label="总价" prop="totle_price" sortable></el-table-column>
        <el-table-column prop="state" label="状态" :filters="stateFil" :filter-method="fliterRace">
          <template slot-scope="scope">
            <span v-if="scope.row.state == 1">已完成</span>
            <span v-else>待处理</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>

</template>

<script>
import myPage from "@/components/my-page";
export default {
  name: "recard-order",
  components:{myPage},
  data(){
    return {
      recardData:[],
      raceFil:[],
      typeFil:[],
      stateFil:[
        {text:'已完成',value:1},
        {text:'待处理',value: 0}
      ]
    }
  },
  mounted() {
    this.getRecard();
  },
  methods:{
    getRecard(){
      this.axios.get('/api/getRecard',{
        params:{
          id:window.sessionStorage.getItem('id')
        }
      }).then(res=>{
        console.log(res.data)
        this.recardData = res.data;
        let races = [];
        let types = [];
        let states = [];
        for (let i = 0; i < this.recardData.length;i++){
          races.push(this.recardData[i].race);
          types.push(this.recardData[i].types);
          states.push(this.recardData[i].state)
        }
        this.raceFil = [...new Set(races)].map(item=>({label:item,text: item,value:item}));
        this.typeFil = [...new Set(types)].map(item=>({label:item,text:item,value:item}));
        console.log(this.raceFil)
        console.log(this,typeFil)
      }).catch(err=>{
        console.log(err)
      })
    },
    fliterRace(value, row, column){
      const property = column['property'];
      return row[property] === value;
    }
  }
}
</script>

<style scoped>
.table_position{
  width: 95%;
  margin: 0px auto 0;
}
</style>
